import {
  Card,
  Form,
  Input,
  Steps,
  NavBar,
  Button,
  ImageViewer,
} from 'antd-mobile'
import { useEffect, useState } from 'react'
import useScorll from '@/hooks/useScorll'
const { Step } = Steps
import './index.scss'
import '@/styles/common.scss'
import apis from '@/apis'
const BasicInfo: React.FC = () => {
  const { scrollToTop } = useScorll()
  useEffect(() => {
    scrollToTop()
  }, [])
  const [visible, setVisible] = useState(false)
  const [infoData, setInfoData]: any = useState(null)
  useEffect(() => {
    async function queryInfo() {
      const res = await apis.getInfoApi()
      setInfoData(res)
    }
    queryInfo()
  }, [])
  return (
    <div style={{ paddingBottom: 80 }}>
      <NavBar back={null} className="navBar">
        个人信息
      </NavBar>
      <Card title="本人照片" bodyStyle={{ padding: 0 }}>
        <Button
          style={{ marginTop: 10, color: '#1677ff' }}
          onClick={() => {
            setVisible(true)
          }}
        >
          单击显示
        </Button>
        <ImageViewer
          classNames={{
            mask: 'customize-mask',
            body: 'customize-body',
          }}
          image={infoData && infoData.myImg}
          visible={visible}
          onClose={() => {
            setVisible(false)
          }}
        />
      </Card>
      <Card title="基本信息" bodyStyle={{ padding: 0 }}>
        <Form layout="horizontal">
          {infoData &&
            infoData.myInfo.map((item, index) => (
              <Form.Item label={item.label} key={index}>
                <Input readOnly defaultValue={item.defaultValue} />
              </Form.Item>
            ))}
          <div
            style={{ paddingLeft: 20 }}
            dangerouslySetInnerHTML={{
              __html: infoData && infoData.personalSkillText,
            }}
          ></div>
        </Form>
      </Card>
      <Card title="教育经历" bodyStyle={{ padding: 0 }}>
        {infoData && (
          <Steps
            direction="vertical"
            style={{
              '--title-font-size': '18px',
              '--description-font-size': '15px',
            }}
          >
            {infoData.educationInfo.map((item, index) => (
              <Step
                key={index}
                title={item.title}
                status="finish"
                description={item.description}
              />
            ))}
          </Steps>
        )}
      </Card>
      <Card title="自我评价" bodyStyle={{ padding: 0 }}>
        {infoData && (
          <div className="evaluate">
            {infoData.evaluateData.map((item, index) => (
              <div key={index}>{item}</div>
            ))}
          </div>
        )}
      </Card>
    </div>
  )
}
export default BasicInfo
